import * as echarts from 'echarts';
import { useEffect, useRef } from 'react';
// 柱状图组件

// 放置功能组件
// 可变代码封装成prop参数

const BarChart = ({ title, data }) => {
  const chartRef = useRef(null);
  useEffect(() => {
    // 保证bom可用,图表渲染
    // 准备图表参数
    // 获取渲染图表的dom节点
    const chartDom = chartRef.current

    // 图表初始化生成图表实例对象
    const myChart = echarts.init(chartDom);
    const option = {
      title: {
        text: title
      },
      xAxis: {
        type: 'category',
        data: data
      },
      yAxis: {
        type: 'value'
      },
      series: [
        {
          data: [10, 40, 70],
          type: 'bar'
        }
      ]
    };

    option && myChart.setOption(option);
  }, []);
  return (
    <div>
      <div ref={chartRef} style={{ width: '500px', height: '400px' }}></div>
    </div>
  )
}

export default BarChart;